<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt "%>  
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> 
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>美食平台</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Staple Food Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
	SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">  
<link href="css/font-awesome.css" rel="stylesheet"> <!-- font-awesome icons -->
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" media="all"/> <!-- Owl-Carousel-CSS -->
<!-- //Custom Theme files --> 
<!-- js -->
<script src="js/jquery-2.2.3.min.js"></script>  
<!-- //js -->
<!-- web-fonts -->   
<link href="http://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet"> 
<link href="http://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet">
<!-- //web-fonts -->
</head>
<body>
 
	<!-- banner -->
	<div class="banner">
	<%@ include file="../jsp/userHeader2.jsp" %>
		<!-- banner-text -->
		<div class="banner-text">	
			<div class="container">
				<h2>Delicious food <br> <span>Best Chefs For you.</span></h2>
				<div class="agileits_search">
					<form action="${pageContext.request.contextPath}/userSearchDelicious.action" method="post">
						<input name="Search" id="Search" type="text" placeholder="输入菜谱名称" >
						<select id="agileinfo_search" name="agileinfo_search">
							<!-- <option value="">受欢迎的菜谱</option>
							<option value="navs">川菜</option>
							<option value="quotes">粤菜</option>
							<option value="videos">湘菜</option>
							<option value="news">东北菜</option> -->
						</select>
						<input type="submit" value="搜索">
					</form>
				</div> 
			</div>
		</div>
	</div>
	<!-- //banner -->   
	<!-- add-products -->
	<div class="add-products">  
		<div class="container">
			<div class="add-products-row">
				<div class="w3ls-add-grids">
					<a href="menu.html"> 
						<h4>家常菜 <span><br>杏鲍菇烧牛肉粒</span></h4>
						<h5>by 点点</h5>
						<h6>马上去做 <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></h6>
					</a>
				</div>
				<div class="w3ls-add-grids w3ls-add-grids-right">
					<a href="menu.html"> 
						<h4>法国菜<span><br>法式烩土豆</span></h4>
						<h5>by 官方出品</h5>
						<h6>马上去做  <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></h6>
					</a>
				</div> 
				<div class="clearfix"> </div> 
			</div>  	 
		</div>
	</div>
	<!-- //add-products --> 
	<!-- deals -->
	<div class="w3agile-deals">
		<div class="container">
			<h3 class="w3ls-title">美食小贴士</h3>
			<div class="dealsrow">
				<div class="col-md-6 col-sm-6 deals-grids">
					<div class="deals-left">
						<i class="fa fa-thumbs-up" aria-hidden="true"></i>
					</div> 
					<div class="deals-right">
						<h4>用刀技巧</h4>
						<p>如何磨刀    |  番茄的正确切开方式</p>
					</div> 
					<div class="clearfix"> </div>
				</div> 
				<div class="col-md-6 col-sm-6 deals-grids">
					<div class="deals-left">
						<i class="fa fa-birthday-cake" aria-hidden="true"></i>
					</div> 
					<div class="deals-right">
						<h4>日常基础烹调法</h4>
						<p>如何处理韭葱 | 香脆烤培根 | 坚果去皮的两种办法</p>
					</div> 
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-6 col-sm-6 deals-grids">
					<div class="deals-left">
						<i class="fa fa-users" aria-hidden="true"></i>
					</div> 
					<div class="deals-right">
						<h4>烘培方法</h4>
						<p>怎样涂抹蛋糕的奶油 | 巧克力曲奇 | 经典法式薄饼 </p>
					</div>
					<div class="clearfix"> </div>
				</div> 
				<div class="col-md-6 col-sm-6 deals-grids">
					<div class="deals-left">
						<i class="fa fa-building" aria-hidden="true"></i>
					</div> 
					<div class="deals-right">
						<h4>自制</h4>
						<p>自制披萨面团 | Homemade lemon curd </p>
					</div>
					<div class="clearfix"> </div>
				</div> 
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //deals --> 
	<!-- dishes -->
	<div class="w3agile-spldishes">
		<div class="container">
			<h3 class="w3ls-title">今日特价</h3>
			<div class="spldishes-agileinfo">
				<div class="col-md-3 spldishes-w3left">
					<h5 class="w3ltitle">特价食材</h5>
					<p>每日提供优惠特价的食材，常见食材和应季食材皆有供应，数量有限哦！</p>
				</div> 
				<div class="col-md-9 spldishes-grids">
					<!-- Owl-Carousel -->
					<div id="owl-demo" class="owl-carousel text-center agileinfo-gallery-row">
						<a href="products.html" class="item g1">
							<img class="lazyOwl" src="images/g1.jpg" title="Our latest gallery" alt=""/>
							<div class="agile-dish-caption">
								<h4>莴苣</h4>
								<span>莴苣莴苣莴苣莴苣莴苣莴苣莴苣莴苣莴苣 </span>
							</div>
						</a>
						<a href="products.html" class="item g1">
							<img class="lazyOwl" src="images/g2.jpg" title="Our latest gallery" alt=""/>
							<div class="agile-dish-caption">
								<h4>牛油果</h4>
								<span>牛油果牛油果牛油果牛油果牛油果牛油果</span>
							</div>
						</a>
						<a href="products.html" class="item g1">
							<img class="lazyOwl" src="images/g3.jpg" title="Our latest gallery" alt=""/>
							<div class="agile-dish-caption">
								<h4>三文鱼</h4>
								<span>三文鱼三文鱼三文鱼三文鱼三文鱼三文鱼 </span>
							</div>
						</a>
						<a href="products.html" class="item g1">
							<img class="lazyOwl" src="images/g4.jpg" title="Our latest gallery" alt=""/>
							<div class="agile-dish-caption">
								<h4>胡萝卜</h4>
								<span>胡萝卜胡萝卜胡萝卜胡萝卜胡萝卜</span>
							</div>
						</a>
						<a href="products.html" class="item g1">
							<img class="lazyOwl" src="images/g5.jpg" alt=""/>
							<div class="agile-dish-caption">
								<h4>烤面筋</h4>
								<span>烤面筋烤面筋烤面筋烤面筋烤面筋烤面筋</span>
							</div>
						</a> 
						<a href="products.html" class="item g1">
							<img class="lazyOwl" src="images/g1.jpg" title="Our latest gallery" alt=""/>
							<div class="agile-dish-caption">
								<h4>手抓饼</h4>
								<span>手抓饼手抓饼手抓饼手抓饼手抓饼手抓饼 </span>
							</div>
						</a>
						<a href="products.html" class="item g1">
							<img class="lazyOwl" src="images/g2.jpg" title="Our latest gallery" alt=""/>
							<div class="agile-dish-caption">
								<h4>寿司</h4>
								<span>寿司寿司寿司寿司寿司寿司寿司寿司寿司</span>
							</div>
						</a>
						<a href="products.html" class="item g1">
							<img class="lazyOwl" src="images/g3.jpg" title="Our latest gallery" alt=""/>
							<div class="agile-dish-caption">
								<h4>菠菜</h4>
								<span>菠菜菠菜菠菜菠菜菠菜菠菜菠菜菠菜菠菜 </span>
							</div>
						</a>
					</div> 
				</div>  
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //dishes --> 
	<%@ include file="../jsp/userFooter.jsp" %>
	<!-- cart-js -->
	<script src="js/minicart.js"></script>
	<script>
        w3ls.render();
        w3ls.cart.on('w3sb_checkout', function (evt) {
        	var items, len, i;

        	if (this.subtotal() > 0) {
        		items = this.items();

        		for (i = 0, len = items.length; i < len; i++) { 
        		}
        	}
        });
    </script>  
	<!-- //cart-js -->	
	<!-- Owl-Carousel-JavaScript -->
	<script src="js/owl.carousel.js"></script>
	<script>
		$(document).ready(function() {
			$("#owl-demo").owlCarousel ({
				items : 3,
				lazyLoad : true,
				autoPlay : true,
				pagination : true,
			});
		});
	</script>
	<!-- //Owl-Carousel-JavaScript -->  
	<!-- start-smooth-scrolling -->
	<script src="js/SmoothScroll.min.js"></script>  
	<script type="text/javascript" src="js/move-top.js"></script>
	<script type="text/javascript" src="js/easing.js"></script>	
	<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
			
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
	</script>
	<!-- //end-smooth-scrolling -->	  
	<!-- smooth-scrolling-of-move-up -->
	<script type="text/javascript">
		$(document).ready(function() {
			getService();
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});
		function getService() {
			var str = "<option value=''>受欢迎的菜谱</option>";
			//$("select[name=txtChannelId]").empty();      //清空  
			$("#agileinfo_search").val(null);
			//Ajax发送数据给后台  
		    $.ajax({  
		        url :"${pageContext.request.contextPath }/allChannel.action",   
		        cache : true,  
		        type : "post",  
		        datatype : "json",  
		        contentType : "application/json; charset=utf-8",  
		        data : "",  
		        success : function (data){ 
		         	 for (var i in data) { 
		       		     str += "<option value='"+ data[i].channelId + "'>" +data[i].channelName+"</option>";
			       	  } 
			       	  $("#agileinfo_search").prepend(str);
			         },  
			         error: function (msg) {  
			             alert("出错了！");  
			         }  
		    });  
		}

	</script>
    <script src="js/bootstrap.js"></script>
</body>
</html>